<template>
	<view>
		<!-- 返回首页 -->
		<uni-bankhome />
		<scroll-view scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y
			lower-threshold="250" class="scoll-page">
			<!-- 搜索 -->
			<view class="nodata" v-if="goodsList===''">
				<u-loading mode="circle" size="28"></u-loading> 加载中……
			</view>
			<view class="nodata" v-else-if="goodsList.length===0">
				<image src="@/static/nodata.png" mode=""></image>
				<p>暂无数据!</p>
			</view>
			<!-- 一行两个商品展示 -->
			<view v-else class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item"
					@click="navigateToStoreDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="goods-detail">
						<div class="title clamp">
							{{ item.title }}
						</div>
						<div v-if="item.storeAddressPath==null&&item.storeAddressDetail==null&&item.distance==null"
							class="goods-bottom">
							<div class='evaluate'>
								<span class='grade' style='font-size: 32rpx;'>{{item.score || 0.0}}分</span>
								<span class='sales'>
									月售 {{item.monthSales || 0}}+
								</span>
							</div>
							<div class="goods-price">
								<text class="hb-money">{{ item.price | unitPrice }}</text>
							</div>
						</div>
						<view v-else>
							<div class='site'>
								{{item.storeAddressPath}}{{ item.storeAddressDetail}}
							</div>
							<div class='distance'>
								<u-icon name="map-fill" color="rgba(36, 36, 36, 1)" size="28"></u-icon>
								<span>{{item.distance<1000 ? `${item.distance}m`: `${Number(item.distance/1000).toFixed(2)}km` }}</span>
							</div>
							<div class='evaluate'>
								<span class='grade' style='font-size: 32rpx;'>{{item.score || 0.0}}分</span>
								<span class='sales'>
									月售 {{item.monthSales || 0}}+
								</span>
							</div>
						</view>

					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>

</template>

<script>
	import {
		getGoodsShopList,
	} from "@/api/goods.js";

	import {
		getHotKeywords,
		GetCommodityShop,
		GetNewProduct
	} from "@/api/home.js";
	import storage from "@/utils/storage";
	export default {
		data() {
			return {
				scrollTop: 0,
				loadIndex: 10,
				oldKeywordIndex: "",
				goodsHeight: "",
				keyword: "",
				goodsList: [],
				loadingType: "more", //加载更多状态
				params: {
					pageNumber: 1,
					pageSize: 10,
					// sort: 'grade_asc',
				},
				routerVal: "",
				name:'',//判断新品优选
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(val) {
			this.name = val.name
			uni.setNavigationBarTitle({
				title: val.name
			});
			this.loadData();
		},
		onReachBottom() {
			if (this.loadingType == "noMore") return
			this.params.pageNumber++;
			this.loadData();

		},
		mounted() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			let topHeight = 0;
			let navHeight = 0;
			uni.getSystemInfo({
				success: function(res) {
					// res - 各种参数

					let top = uni.createSelectorQuery().select(".u-navbar");
					top
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								topHeight = data.height; // 获取元素宽度
							}
						})
						.exec();
					let nav = uni.createSelectorQuery().select(".navbar");
					nav
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								navHeight = data.height; // 获取元素宽度
							}
						})
						.exec();
				},
			});
			this.goodsHeight = windowHeight - navHeight - topHeight;
			// #ifdef APP-PLUS
			this.goodsHeight = this.goodsHeight - 100;
			// #endif
			this.goodsHeight += "px";
		},

		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
				this.loadingType = "loading";
				if (type == "refresh") {
					this.goodsList = [];
				}
				//没有更多直接返回 #TODO
				let goodsList = await GetNewProduct({
					pageSize: 10,
					pageNumber: this.params.pageNumber,
					marketEnable: "UPPER",
					...this.params
				});
				if (goodsList.data.result.records.length < 10) {
					this.loadingType = "noMore";
				}
				if (this.goodsList === '') {
					this.goodsList = []
				}

				this.goodsList.push(...goodsList.data.result.records);
				uni.hideLoading();
			},
			// 格式化金钱  1999 --> [1999,00]
			formatPrice(val) {
				if (typeof val == "undefined") {
					return val;
				}
				return val.toFixed(2).split(".");
			},
			// 展示更多数据
			showMore() {
				this.loadOldKeyword(this.oldKeywordIndex);
			},
			// 跳转地址
			navigateToStoreDetailPage(item) {
				if (item.storeAddressPath == null && item.storeAddressDetail == null && item.distance == null) {
					uni.navigateTo({
						url: `/pages/product/goods?id=${item.skuList[0].id}&goodsId=${item.goodsId}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/product/shopPage?id=${item.id}`,
					});
				}

			},
			loadmore() {
				if (this.loadingType == 'noMore') return
				this.params.pageNumber++;
				this.loadData();
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "../search/search.scss";

	.goods-detail {
		.evaluate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(255, 137, 33, 1);
			margin-bottom: 10upx;

			.grade {
				font-size: 26upx;
			}

			.sales {
				font-size: 20upx;
				color: rgba(173, 170, 170, 1);
			}
		}

		.title {
			white-space: nowrap;
			/* 内容会被修剪，并且其余内容是不可见的。 */
			overflow: hidden;
			/* 显示省略符号来代表被修剪的文本。 */
			text-overflow: ellipsis
		}
	}

	.site {
		font-size: 20rpx;
		color: rgba(173, 170, 170, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 8upx;
	}

	.distance {
		display: flex;
		justify-content: flex-end;
		font-size: 20upx;
		color: rgba(23, 23, 23, 1);
	}

	.loactionBox {
		white-space: nowrap;
		overflow: hidden;

		text-overflow: ellipsis image {
			width: 24rpx;
			height: 24rpx;
		}

		p {
			font-size: 24rpx;
			margin-bottom: 5upx;
			color: rgba(173, 170, 170, 1);
		}
	}

	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 100rpx;
		flex-direction: column;

		image {
			width: 400rpx;
			height: 400rpx;
		}

		p {
			color: #666;
			margin-top: 50rpx;
			font-size: 28rpx;
			letter-spacing: 6rpx;
		}
	}
</style>
